<script lang="ts" setup>
import type { FieldValues, PlusColumn } from 'plus-pro-components'

import { ref } from 'vue'

const state = ref<FieldValues>({
    statusOne: '0',
    statusTwo: '0',
    tagInstructions: '',
    tagName: '',
    tagType: '1',
})

// const rules = {
//     name: [
//         {
//             message: '请输入名称',
//             required: true,
//         },
//     ],
//     tag: [
//         {
//             message: '请输入标签',
//             required: true,
//         },
//     ],
// }

const columns: PlusColumn[] = [
    {
        fieldProps: {
            placeholder: '请输入',
        },
        label: '标签名称',
        prop: 'tagName',
        tooltip: '名称最多显示6个字符',
        valueType: 'copy',
        width: 120,
    },
    {
        label: '一级分类',
        options: [
            {
                color: 'red',
                label: '基础属性',
                value: '0',
            },
            {
                color: 'blue',
                label: '已解决',
                value: '1',
            },
            {
                color: 'yellow',
                label: '解决中',
                value: '2',
            },
            {
                color: 'red',
                label: '失败',
                value: '3',
            },
        ],
        prop: 'statusOne',
        valueType: 'select',
        width: 120,
    },
    {
        label: '二级分类',
        options: [
            {
                color: 'red',
                label: '自然属性',
                value: '0',
            },
            {
                color: 'blue',
                label: '已解决',
                value: '1',
            },
            {
                color: 'yellow',
                label: '解决中',
                value: '2',
            },
            {
                color: 'red',
                label: '失败',
                value: '3',
            },
        ],
        prop: 'statusTwo',
        valueType: 'select',
        width: 120,
    },
    {
        label: '标签类型',
        options: [
            {
                label: '手动标签',
                value: '0',
            },
            {
                label: '自动标签',
                value: '1',
            },
        ],
        prop: 'tagType',
        valueType: 'radio',
    },
    {
        label: '条件设置',
        options: [
            {
                label: '租房合同签订',
                value: '0',
            },
            {
                label: '好房合同签订',
                value: '1',
            },
        ],
        prop: 'conditions',
        valueType: 'checkbox',
    },
    {
        fieldProps: {
            placeholder: '请输入',
        },
        hideInForm: computed(() => state.value.tagType === '0'),
        label: '标签说明',
        prop: 'tagInstructions',
        tooltip: '名称最多显示6个字符',
        valueType: 'copy',
        width: 120,
    },
]

function handleChange(values: FieldValues, prop: PlusColumn) {
    console.log(values, prop, 'change')
}
function handleSubmit(values: FieldValues) {
    console.log(values, 'Submit')
}
function handleSubmitError(err: any) {
    console.log(err, 'err')
}
function handleReset() {
    console.log('handleReset')
}
</script>

<template>
    <el-card>
        <PlusForm v-model="state"
                  :columns="columns"
                  label-width="120"
                  submit-text="提交"
                  reset-text="返回"
                  @change="handleChange"
                  @submit="handleSubmit"
                  @submit-error="handleSubmitError"
                  @reset="handleReset"
        />
    </el-card>
</template>
